import {useState} from 'react'
import { NavBar,Input,Button,Toast } from 'react-vant';
import styles from './userinfo.module.css'
import { useNavigate } from 'react-router-dom';
import { api } from '../../luyou/index'
export default function Userinfo() {
  const navigate = useNavigate()
  let [name,setName] = useState(sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user')).name:'')
  let [username,setUsername] = useState(sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user')).username:'')
  let [email,setEmail] = useState(sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user')).email:'')
  let [phone,setPhone] = useState(sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user')).phone:'')

  let update=async()=>{
      let {data}=await api.post('/updateuser',{_id:sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user'))._id:'',name,username,email,phone})
      console.log(data);
      if(data.code===200){
        Toast.success('修改成功')
        sessionStorage.setItem('user',JSON.stringify(data.data))
        navigate(-1)
      }
      
  }
  return (
    <>
      <NavBar
        title="个人信息"
        leftText="返回"
        inset
        onClickLeft={() => navigate(-1)}
      />
      <div className={styles.box}>
        <p>姓名</p>
        <Input
          value={name}
          onChange={text => setName(text)}
          placeholder='请输入文本'
          clearable
          className={styles.inp}
        />
        <p>用户名</p>
        <Input
          value={username}
          onChange={text => setUsername(text)}
          placeholder='请输入文本'
          clearable
          className={styles.inp}
        />
        <p>邮箱</p>
        <Input
          value={email}
          onChange={text => setEmail(text)}
          placeholder='请输入文本'
          clearable
          className={styles.inp}
        />
        <p>手机号</p>
        <Input
          value={phone}
          onChange={text => setPhone(text)}
          placeholder='请输入文本'
          clearable
          className={styles.inp}
        />
      </div>
      <div className={styles.box4}>
         <Button className={styles.btn} onClick={update}>保存</Button>
      </div>
    </>
  )
}
